<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>安全设备状态监控</title>
  <link rel="stylesheet" href="../assets/styles.css" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="body-bg">
  <header class="header">
    <div class="title datav-title">河北省高速公路联网收费省级密钥资源池管理系统</div>
  </header>
  <div class="layout">
    <aside class="sidebar">
      <!-- <div class="logo">密钥资源池</div> -->
      <div class="logo">安全设备状态监控</div>
      <nav class="menu">
        <a href="../index.html">首页</a>
        <a href="app.html">应用管理</a>
        <a href="crypto.html">加密设备状态</a>
        <a class="active" href="security.html">安全设备状态</a>
        <a href="network.html">部省密钥网络状态</a>
        <!-- <a href="reports.html">报表管理</a> -->
        <a href="jobs.html">定时任务</a>
      </nav>
      <div class="tree">
        <div class="tree-node">
          <div class="tree-header">报表管理<span class="chevron"></span></div>
          <div class="tree-children">
            <a class="tree-link" href="reports.html?tab=app" data-tab="app">服务调用统计</a>
            <a class="tree-link" href="reports.html?tab=crypto" data-tab="crypto">加密设备运行监测</a>
            <a class="tree-link" href="reports.html?tab=security" data-tab="security">安全设备运行监测</a>
            <a class="tree-link" href="reports.html?tab=network" data-tab="network">部省密钥网络运行报表</a>
          </div>
        </div>
      </div>
    </aside>
    <div class="content">
      <main class="container">
    <section class="card">
      <h3>设备状态概览</h3>
      <div class="grid cols-4">
        <div class="card success"><div>设备ID：SEC-101</div><div>IP：10.0.1.101</div><div>状态：在线</div><div>最近心跳：09:12</div></div>
        <div class="card success"><div>设备ID：SEC-102</div><div>IP：10.0.1.102</div><div>状态：在线</div><div>最近心跳：09:12</div></div>
        <div class="card danger"><div>设备ID：SSL-201</div><div>IP：10.0.2.201</div><div>状态：异常</div><div>最近心跳：09:05</div></div>
        <div class="card success"><div>设备ID：SSL-202</div><div>IP：10.0.2.202</div><div>状态：在线</div><div>最近心跳：09:12</div></div>
      </div>
    </section>

    <section class="grid cols-2" style="margin-top:16px;">
      <div class="card chart-card">
        <h3>近 7 天调用失败原因分布</h3>
        <div class="chart-box"><canvas id="chartReasons"></canvas></div>
      </div>
      <div class="card">
        <h3>调用记录</h3>
        <table class="table">
          <thead><tr><th>设备ID</th><th>类型</th><th>IP</th><th>调用结果</th><th>失败原因</th><th>最近心跳</th></tr></thead>
          <tbody id="recordsSecurity"></tbody>
        </table>
      </div>
    </section>
      </main>
    </div>
  </div>

  <script>
    new Chart(document.getElementById('chartReasons'), {
      type: 'bar',
      data: {
        labels: ['证书过期','参数错误','签名失败','连接拒绝','超时'],
        datasets: [{ label:'数量', data:[23,41,12,9,38], backgroundColor:'#ef4444' }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { labels: { color: '#e5e7eb' } } },
        scales: {
          x: { ticks: { color: '#cbd5e1' }, grid: { color: 'rgba(148,163,184,0.12)' } },
          y: { ticks: { color: '#cbd5e1' }, grid: { color: 'rgba(148,163,184,0.12)' } }
        }
      }
    });
    // 设备状态概览：为每个设备卡片首行添加“设备名称”（随机：网关设备 / 验签设备）
    (function addDeviceNames(){
      const namePool = ['网关设备','验签设备'];
      const section = Array.from(document.querySelectorAll('section.card'))
        .find(s => s.querySelector('h3')?.textContent.trim() === '设备状态概览');
      if (!section) return;
      const cards = section.querySelectorAll('.grid.cols-4 .card');
      cards.forEach(card => {
        const name = namePool[Math.floor(Math.random() * namePool.length)];
        const div = document.createElement('div');
        div.textContent = `设备名称：${name}`;
        card.insertBefore(div, card.firstElementChild);
      });
    })();
    // 渲染“状态记录/统计”默认10条数据
    (function initSecurityTable(){
      const $tbody = document.getElementById('recordsSecurity');
      if (!$tbody) return;
      const types = ['验签','网关'];
      function pad(n){ return String(n).padStart(2,'0'); }
      function fmt(dt){ return `${dt.getFullYear()}-${pad(dt.getMonth()+1)}-${pad(dt.getDate())} ${pad(dt.getHours())}:${pad(dt.getMinutes())}`; }
      const rows = Array.from({length:10}, (_,i) => {
        const idPrefix = i % 2 === 0 ? 'SEC' : 'SSL';
        const devId = `${idPrefix}-${100 + i}`;
        const ip = `10.0.${idPrefix==='SEC' ? '1' : '2'}.${100 + i}`;
        const dt = new Date(Date.now() - Math.floor(Math.random()*48)*3600000);
        const isOk = Math.random() > 0.15; // 约85%成功
        const result = isOk ? '成功' : '失败';
        const reasons = ['证书过期','参数错误','签名失败','连接拒绝','超时','其他'];
        const reason = isOk ? '-' : reasons[Math.floor(Math.random()*reasons.length)];
        return `<tr><td>${devId}</td><td>${types[i%types.length]}</td><td>${ip}</td><td>${result}</td><td>${reason}</td><td>${fmt(dt)}</td></tr>`;
      }).join('');
      $tbody.innerHTML = rows;
    })();
  </script>
  <script>
    const th = document.querySelector('.tree-header');
    if (th) th.addEventListener('click', () => th.parentElement.classList.toggle('expanded'));
  </script>
</body>
</html>